<template>
      <swiper 
        height="aspect-ratio"
        :aspect-ratio=.4
        loop
        auto
        :interval=5000
        :show-desc-mask=false
        dots-position="center"
        dots-class="custom-bottom"
        class="swiperBox"
      >
        <swiper-item 
            v-for="(item, index) in banner" 
            :key="index">
            <a :href="item.url" v-if="item.url != ''">
                <img :src="item.img" style="max-width:10rem">
            </a>
            <a href="javascript:;" v-else>
                <img :src="item.img" style="max-width:10rem">
            </a>
            
        </swiper-item>
      </swiper>
</template>
<script>
import {Swiper,SwiperItem} from 'vux';

export default {
  components:{
      Swiper,
      SwiperItem
  },
  props:['list'],
  data(){
    return {
        banner:[]
    }
  },
  watch:{
    list(val){
    //   //console.log(val);
      this.banner = val
    }
  }
}
</script>
<style>
    .vux-slider > .vux-indicator > a > .vux-icon-dot.active{
        background-color: #e64f2b !important;
    }
    .vux-slider > .vux-indicator > a > .vux-icon-dot{
        width: 0.5rem !important;
        height: .1rem !important;
        border-radius: 0 !important;
    }
</style>
